<!--
 * @Author: LiYuan
 * @Date: 2021-03-30 09:49:47
 * @LastEditTime: 2024-07-27 15:04:43
 * @LastEditors: 铃兰 wanglili@publink.cn
 * @Description: 关联工单
 * You build it, You run it.
-->
<template>
  <div class="relation-task">
    <el-table 
      :data="relationTaskList"
      stripe
      border
      header-row-class-name="base-table-header-v3"
      row-class-name="base-table-row-v3"
    >
      <el-table-column :label="$t('common.form.type.taskNo')" width="150" >
        <template slot-scope="scope">
          <el-button type="text" @click="toTaskView(scope.row.id, scope.row.taskNo)">{{scope.row.taskNo}}</el-button>
        </template>
      </el-table-column>
      <el-table-column :label="$t('common.fields.taskType.displayName')" prop="templateName" width="150" show-overflow-tooltip></el-table-column>
      <el-table-column :label="$t('common.form.type.productName')">
        <template slot-scope="scope">
          {{getProductName(scope.row.products).join(',')}}
        </template>
      </el-table-column>
      <el-table-column :label="$t('customer.detail.customerTaskTable.table.label.state')" width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.attribute && scope.row.attribute.lastPassedNodeStateName">
            {{scope.row.attribute.lastPassedNodeStateName}}
          </span>
          <span v-else>
            {{scope.row.isPaused == 1 ? $t('common.task.status.paused') : TaskStateEnum.getName(scope.row.state)}}
          </span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('common.fields.executorUser.displayName')">
        <template slot-scope="scope" v-if="scope.row.executor">
          <span v-user="scope.row.userId" class="user-card-triggle">{{scope.row.executor.displayName}}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('common.base.column.createTime')" width="200">
        <template slot-scope="scope">
          {{scope.row.createTime | fmt_datetime}}
        </template>
      </el-table-column>
      <el-table-column :label="$t('common.base.completeTime')" width="200">
        <template slot-scope="scope">
          {{scope.row.completeTime | fmt_datetime}}
        </template>
      </el-table-column>
      <el-table-column :label="$t('event.setting.constant.flow_map.name5')" prop="degree" width="150"></el-table-column>
    </el-table>

    <p class="check-archive" @click="showArchive" v-if="archiveCount>0">{{$t('customer.detail.customerTaskTable.checkArchive')}}</p>

    <archive-dialog ref="archiveDialog"></archive-dialog>
  </div>
</template>

<script>
import archiveDialog from '@src/component/compomentV2/ArchiveDialog';
import TaskStateEnum from '@model/enum/TaskStateEnum.ts';
import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum'
import { openAccurateTab } from '@src/util/platform'
export default {
  name: 'relation-task',
  props:{
    relationTaskList: {
      type: Array,
      default: ()=> []
    },
    archiveCount:{
      type:Number,
      default:0
    },
    isArchiveView:{
      type:Boolean,
      default:false
    },
    eventId:{
      type:String,
      default:''
    }
  },
  data() {
    return{
      TaskStateEnum
    }
  },
  methods: {
    // 查看归档工单
    showArchive(){
      if(this.isArchiveView) this.$refs.archiveDialog.open({eventId:this.eventId});
      else{
        this.$confirm(this.$t('customer.detail.customerTaskTable.checkArchiveConfirm.message'), this.$t('common.base.toast'), {
          confirmButtonText: this.$t('common.base.makeSure'),
          cancelButtonText: this.$t('common.base.cancel'),
          type: 'warning'
        }).then(()=>{}).catch(()=>{})
      }
    },
    toTaskView(taskId, taskNo) {
      let fromId = window.frameElement.getAttribute('id');
      // this.$platform.openTab({
      //   id: `taskView_${ taskId}`,
      //   title: `工单${taskNo}`,
      //   close: true,
      //   url: `/task/view/${ taskId}`,
      //   fromId
      // });
      openAccurateTab({
        type: PageRoutesTypeEnum.PageTaskView,
        key: taskId,
        titleKey: taskNo,
        fromId
      })
    },
    getProductName(products) {
      let productName = [];
      products && products.map(product => {
        productName.push(product.name);
      })
      return productName;
    }
  },
  components:{
    [archiveDialog.name]:archiveDialog
  }
}
</script>

<style lang="scss" scoped>
.check-archive{
  color: $color-primary;
  text-align: center;
  margin-bottom: 0;
  cursor: pointer;
  flex-basis: 100%;
  margin-top: 12px;
}
.relation-task {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  overflow: hidden;
  ::v-deep .el-table {
    flex: 1;
    overflow: auto;
  }
}
</style>